import React from "react"
import { Form, Col, Row, Button, Tooltip } from 'antd';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { useFormFunc } from "./input"
import './css.styl'
import { generateUID } from "../../utils/index"

export default class Query extends React.Component {
    constructor(prop) {
        super(prop);
        this.state = {
            expand: prop?.expand || false,
            formRef: React.createRef()
        };

    }
    componentDidMount() {
        // console.log('组件挂在完成', this.state.formRef);
    }
    render() {

        // 表单字段
        const fields = JSON.parse(JSON.stringify(this.props.fields)) || []

        const publicFunc = new useFormFunc()

        /**
         * 设置表单字段
         * @param [{*}] field 
         * @returns 
         */
        const setFields = (field) => {
            return field.map(item => {
                return (
                    // <Col span={item.span || 6} key={item.name}>
                    <div style={{ display: 'flex' }} key={item.key || item.name}>
                        <Tooltip title={item?.label}>
                            <div className="form_item_label-left" style={{ padding: '0px 10px', width: '100px', textAlign: 'right', lineHeight: '32px', height: '32px' }}>
                                <span style={{ color: 'red' }}>{item?.required ? '*' : ''}</span>
                                <span>{item?.label}&nbsp;:</span>
                            </div>
                        </Tooltip>
                        <div style={{ flex: 1 }}>
                            <Form.Item
                                key={generateUID()}
                                name={item?.name}
                                rules={[{ required: item?.required, message: item?.message || `请输入${item?.label}!` }]}
                            >
                                {publicFunc.createInput(item, this.props)}
                            </Form.Item>
                        </div>
                    </div>
                    // </Col>
                )
            })
        }

        /**
         * 提交表单且数据验证成功后回调事件
         * @param {*} values 
         */
        const onFinish = (values) => {
            console.log('Success:', values);
            this.props?.onFinish && this.props?.onFinish(values)
        };

        /**
         * 提交表单且数据验证失败后回调事件
         * @param {*} errorInfo 
         */
        const onFinishFailed = (errorInfo) => {
            console.log('Failed:', errorInfo);
            this.props?.onFinishFailed && this.props?.onFinishFailed(errorInfo)
        };

        /**
         * 重置
         */
        const onReset = () => {
            this.state.formRef.current.resetFields();
            this.props?.onReset && this.props?.onReset()
        };

        // 展开
        const setExpand = () => {
            this.setState({
                expand: !this.state.expand
            })
        }
        const handleChange = (e) => {
            console.log('handleChange', e);
        }

        const setinitialValues = () => {
            let obj = {}
            fields.map(item => {
                obj[item.name] = item.defaultValue
            })
            return obj
        }
        return (
            <div className="form-control" style={{ height: !this.state.expand ? '62px' : 'auto' }}>
                <Form
                    ref={this.state.formRef}
                    name="basic"
                    initialValues={setinitialValues()}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                    labelWrap={true}
                >
                    <div className={!this.state.expand ? 'form_flex' : 'unset_flex'}>
                        <div className={'formItem_control'}>
                            <Row gutter={[32, 0]} span={!this.state.expand ? 8 : 6}>
                                {setFields(fields)}
                            </Row>
                        </div>
                        <div className={!this.state.expand ? 'but-control' : 'but-float'}>
                            <Form.Item>
                                <Button htmlType="button" onClick={onReset}>
                                    重置
                                </Button>
                                <Button type="primary" htmlType="submit" style={{ marginLeft: '10px' }}>
                                    {this.props?.submitTex ? this.props.submitTex : '提交'}
                                </Button>
                                <a
                                    style={{
                                        fontSize: 12,
                                        marginLeft: '10px',
                                        display: this.props.fields.length > 4
                                            ? 'inline-block' : 'none'
                                    }}
                                    onClick={() => {
                                        setExpand(!this.state.expand);
                                    }}
                                >
                                    {this.state.expand ? <UpOutlined /> : <DownOutlined />} {this.state.expand ? '收起' : '展开'}
                                </a>
                            </Form.Item>
                            {/* 扩展按钮插槽 */}
                            {this.props.extendSlot}
                        </div>
                    </div>
                </Form >
            </div>
        );
    }
}